<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3 2D多重变形制作3D立方体</title>
	<style type="text/css">
		@-webkit-keyframes spin{
			0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
			100%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}
		}
		@-moz-keyframes spin{
			0%{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}
			100%{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}
		}
		@-ms-keyframes spin{
			0%{-ms-transform:rotateY(0deg);transform:rotateY(0deg)}
			100%{-ms-transform:rotateY(360deg);transform:rotateY(360deg)}
		}
		@-o-keyframes spin{
			0%{-o-transform:rotateY(0deg);transform:rotateY(0deg)}
			100%{-o-transform:rotateY(360deg);transform:rotateY(360deg)}
		}
		@keyframes spin{
			0%{transform:rotateY(0deg)}
			100%{transform:rotateY(360deg)}
		}
		.stage {
			width: 300px;
			height: 300px;
			float: left;
			margin: 15px;
			position: relative;
			background: url(images/bg-grid.jpg) no-repeat center center;
			background-size: 100% 100%;
			
			-webkit-perspective: 1200px;
			-moz-perspective: 1200px;
			-ms-perspective: 1200px;
			-o-perspective: 1200px;
			perspective: 1200px;
		}
		.container {
			position: relative;
			height: 230px;
			width: 100px;
			top: 50%;
			left: 50%;
			margin: -100px 0 0 -50px;
			
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.container:hover{
			-moz-animation:spin 5s linear infinite;
			-o-animation:spin 5s linear infinite;
			-webkit-animation:spin 5s linear infinite;
			animation:spin 5s linear infinite;
		}
		.side {
			font-size: 20px;
			font-weight: bold;
			height: 100px;
			line-height: 100px;
			color: #fff;
			position: absolute;
			text-align: center;
			text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
			text-transform: uppercase;
			width: 100px;
		}
		
		.top {
			background: #9acc53;
			-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
			-moz-transform: rotate(-45deg) skew(15deg, 15deg);
			-ms-transform: rotate(-45deg) skew(15deg, 15deg);
			-o-transform: rotate(-45deg) skew(15deg, 15deg);
			transform: rotate(-45deg) skew(15deg, 15deg);
		}
		.left {
			background: #8ec63f;
			-webkit-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
			-moz-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
			-ms-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
			-o-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
			transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
		}
		.right {
			background: #80b239;
			-webkit-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
			-moz-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
			-ms-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
			-o-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
			transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
		}
	</style>
</head>
<body>
<div class="stage">
	<div class="container">
		<div class="side top">1</div>
		<div class="side left">2</div>
		<div class="side right">3</div>
	</div>
</div>

</body>
</html>